import SideMenu from "../../components/NewSandBox/SideMenu";
import TopHeader from "../../components/NewSandBox/TopHeader";
import { Layout, theme } from "antd";
import OutletDefend from "../../components/OutletDefend";
import {  Spin } from 'antd';
import { useSelector } from "react-redux";
const { Content } = Layout;
import { useState } from "react";
function NewSandBox() {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  //因为这只是简单的状态管理 所以使用简单的组件通信就足矣 没必要用redux这些的管理工具
  const [collapsed, setCollapsed] = useState(false);
  const loadingStore=useSelector(state=>state.loading.isLoading)
  
  return (
    <Layout>
      <SideMenu collapsed={collapsed} />

      <Layout>
        <TopHeader collapsed={collapsed} setCollapsed={setCollapsed} />
        <Content
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
            overflow: "auto",
          }}
        >
          {/* 修复：应该使用loadingStore.isLoading而不是整个loadingStore对象 */}
          <Spin size="large" spinning={loadingStore}>
            {/* 子路由渲入口 */}
            <OutletDefend />
          </Spin>
        </Content>
      </Layout>
    </Layout>
  );
}

export default NewSandBox;